<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { onLongPress } from "@vueuse/core";
import { useColumns, Stats, StatsCat } from "./columns";
defineOptions({
  name: "UserCount"
});

import { deviceDetection } from "@pureadmin/utils";
import { useMenu } from "@/utils/power";
const isMobile = deviceDetection();
const power = useMenu(["userLevel"]);
const { loading, dataList } = useColumns(power.value);
</script>

<template>
  <div>
    <el-row :gutter="24" justify="start">
      <re-col
        v-for="(item, index) in dataList"
        :key="index"
        v-motion
        class="mb-[18px]"
        :value="24"
        :xs="24"
        :sm="24"
        :md="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * 1
          }
        }"
      >
        <el-card class="box-card">
          <h3>{{ item.title }}</h3>
          <el-divider />
          <el-row :gutter="24" justify="start">
            <el-col
              v-for="(stat, jndex) in item.child"
              :key="index * 10 + jndex"
              :span="isMobile ? 24 : 6"
            >
              <div class="flex flex-row my-2 items-center">
                <div class="flex-1 text-center">
                  <div class="fl">{{ stat.title }}</div>
                  <div v-if="stat.type == 1" class="number">
                    <el-tag
                      v-for="(level, lndex) in stat.value"
                      :key="lndex"
                      type="primary"
                    >
                      {{ level.title }}-<span class="text-[red] font-bold">{{
                        level.value
                      }}</span>
                    </el-tag>
                  </div>
                  <div v-else class="text-[#409eff] font-bold text-2xl">
                    {{ stat.value }}
                  </div>
                </div>
                <el-divider
                  v-if="jndex % 4 != 3"
                  class="h-5!"
                  direction="vertical"
                  content-position="center"
                />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </re-col>
    </el-row>
    <el-backtop :right="100" :bottom="100" />
  </div>
</template>
<style scoped>
h1 {
  font-size: 24px;
  color: #0070f3;
}
</style>
